<template>
    <el-row class="header">
        <!-- 左边logo -->
        <el-col :span="4" class="logo">
            <img @click="tohome" src="../assets/logo.png" alt="">
        </el-col>
        <!-- 中间导航区域 -->
        <el-col class="main" :span="16">
            <el-menu
                    :default-active="$route.path"
                    class="menu"
                    router
                    mode="horizontal"
                    @select="handleSelect"
                    active-text-color="#000">
                <!-- 循环写的路由，其中路由中有  hidden：true 的就不加入循环 -->
                <template
                        v-for="route in routesToShow">

                    <!-- 循环没有children的路由 v-if="!route.children" -->
                    <el-menu-item
                            :key="route.path"
                            :index="route.path" >
                        {{ route.description }}
                    </el-menu-item>

<!--                    &lt;!&ndash; 循环有children的路由 &ndash;&gt;-->
<!--                    <el-submenu v-else :index="route.path">-->
<!--                        <template slot="title">{{ route.name }}</template>-->
<!--                        <el-menu-item-->
<!--                                v-for="child in route.children"-->
<!--                                :index="child.path"-->
<!--                                :key="child.path">-->
<!--                            {{ child.name }}-->
<!--                        </el-menu-item>-->
<!--                    </el-submenu>-->

                </template>
            </el-menu>
        </el-col>
        <!-- 右边用户信息以及登陆注册 -->
        <el-col :span="4" class="user">
            <!-- 根据logined值的真假来判断是显示登录按钮还是用户信息
            以后根据登录状态来改变 -->
            <el-button-group v-if="(userCoreCode == undefined)" >
                <el-button  class="button" @click.native="tologin" type="danger" size="small" round >登录</el-button>
                <el-button  class="button" @click.native="toregin" type="success" size="small" round >注册</el-button>
            </el-button-group>
            <div v-else>
                <el-dropdown>
                    <img class="avatar" src="../assets/logo.png" alt="">
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>账号详情：{{userCoreCode}}</el-dropdown-item>
                        <el-dropdown-item>我的工作台</el-dropdown-item>
                        <el-dropdown-item divided>
                            <el-button @click="tologout">注销</el-button></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-col>
    </el-row>
</template>
<script>
    export default {
        // ...
        data () {
            return {

            }
        },
        computed: {
            userCoreCode() {
                return this.$store.getters['userCoreCode']
            },
            routesToShow(){
               return this.$router.options.routes.filter(r=>!r.hidden)
            }
        },
        methods: {
            handleSelect () {
            },
            tohome () {
                this.$router.push('/')
            },
            tologin () {
                this.$router.push('/login_page')
            },
            toregin () {
                this.$router.push('/regin_page')
            },
            tologout(){
                this.$store.dispatch("logout")
                    .then(()=>{
                        this.$router.push("/login_page")
                    })
            }
        }
    }
</script>
<style scoped>
    .header {
        width: 100%;
        height: 60px;
        margin: 0;
        background: #fff;
        position: fixed;
        top: 0;
        left: 0;
        box-shadow: 0 0 25px #666;
    }
    .logo img {
        width:60px;
        height: 60px;
        cursor: pointer;
    }
    .button {
        margin: 15px 0;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        margin: 10px 0;
        cursor: pointer;
    }
</style>